<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>后台管理-反馈内容</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="/resources/src/css/admin/main.css" />
		<link rel="stylesheet" href="/resources/src/css/admin/user-manage.css" />
		<style>
			.joModal-content{
				width:573px; height:435px; background-color:#ccc; padding:30px; box-sizing:border-box;
			}
			
			.joClose{
				position:absolute; right:6px;top:2px; font-size:20px;color:#4d4d4d; cursor:pointer;
			}
			.joClose:hover{color:#23a8f5;}
			
			.joModal-body{
				text-align:center; width:100%; height:375px; line-height:375px; overflow:hidden;
			}
			
			#screenshot{max-width:513px; height:auto; display:inline-block;}
		</style>
    </head>
    <body>
		<article class="main">
			<div class="main-wrapper">
				<section class="content">
					<div class="container">
						<div class="con-header">
							<div class="folderbar">反馈内容</div>
						</div>
						<div class="con-body">
							<div class="toolbar">
								<div class="toolbar-right clearfix">
									<div class="input-icon pull-left">
										<input type="text" id="search" placeholder="输入用户名/手机/邮箱查询"/>
										<i class="iconfont icon-sousuo" id="search-btn"></i>
									</div>
									<div class="input-icon marleft pull-left">
										<label for="date" class="iconfont icon-rili"></label>
										<span>创建时间：<span>
										<input type="text" id="date" placeholder="2017-12-11 14:12:13 - 2017-12-11 14:12:13"/>
									</div>
								</div>
							</div>
							<div class="user-table table-responsive">
								<table class="table">
									<thead>
										<tr>
											<th>反馈人</th>
											<th>反馈内容</th>
											<th>联系电话</th>
											<th>联系邮箱</th>
											<th>创建时间<i id="create-time" class="iconfont icon-paixu" data-order="0"></i></th>
											<th>截图</th>
											<th data-toggle="joDropdown">
												跟进情况<i class="iconfont icon-caidanshaixuan"></i>
												<ul data-toggle="joMenu">
													<li><a href="">全部</a></li>
													<li><a href="">已处理</a></li>
													<li><a href="">跟进中</a></li>
													<li><a href="">未处理</a></li>
												</ul>
											</th>
										</tr>
									</thead>
									<tbody>
										<tr data-userId="255">
											<td>胡端彪</td>
											<td><a href="#">遇到严重的bug</a></td>
											<td>13226547878</td>
											<td>123@qq.com</td>
											<td>2017年5月11日 14:22:23</td>
											<td><a data-btn="viewPic" data-src="/resources/src/images/20160315233954506.jpg">查看</a></td>
											<td>已处理</td>
										</tr>
									</tbody>
								</table>		
							</div>
						</div>
						<div class="con-footer text-center">
							<div class="pagination clearfix">
								<span class="pull-left">共有12条记录，第1页，共有2页</span>
								<a href="#" class="first pull-left">首页</a>
								<a href="#" class="prev pull-left">上一页</a>
								<a href="#" class="next pull-left">下一页</a>
								<a href="#" class="last pull-left">末页</a>
								<input type="text" class="pull-left" id="page" placeholder="1"/>
								<a href="#" id="go-page" class="pull-left">确定</a>
							</div>
						</div>
					</div>
				</section>
			</div>
		</article>
		
		<!-- 查看截图模态框 -->
		<div class="joModal viewPic-modal" id="screenshot-modal" data-liffect="fadeIn">
			<div class="joModal-dialog">
				<div class="joModal-content" data-liffect="slideTop">
					<i class="iconfont icon-cuowu joClose" data-modal="close"></i>
					<div class="joModal-body">
						<img id="screenshot" src="/resources/src/images/qrcode.png" alt="截图"/>
					</div>
				</div>
			</div>	
		</div>

		<script src="/resources/src/js/jquery-2.1.4.js"></script>
		<script src="/resources/src/js/bootstrap.min.js"></script>
		<script src="/resources/src/js/jquery.nicescroll.js"></script>
		<script src="/resources/src/js/admin/main.js"></script>
		<script src="/resources/src/js/moment.min.js"></script>
		<script src="/resources/src/js/daterangepicker.js"></script>
		<script>
			$(function(){
				//搜索
			 	$("#search-btn").on("click",function(){
			 		var value=$("#search").val().trim();
			 		if(value!="" && value!=null){
			 			console.log(value);
			 			/*
			 			$.ajax({
			 				type:"get",
			 				url:"",
			 				async:true,
			 				data:"",
			 				success:function(data){
			 					//do something
			 				}
			 			});*/
			 		}
			 	});
				
				//日历选择器
				$('#date').daterangepicker({
				    //startDate: "2017-06-08",
				    //endDate: "2017-06-14",
				    timePicker:true,
				    timePicker24Hour:true,
				    timePickerSeconds:true,
				    parentEl:"#date-picker",
				    applyClass:"btn-primary",
				    opens:"center",
				    //本地化配置
				    locale : {  
				    	format: "YYYY-MM-DD HH:MM:SS",
				        applyLabel : '确定',  
				        cancelLabel : '取消',  
				        fromLabel : '起始时间',  
				        toLabel : '结束时间',  
				        customRangeLabel : '自定义',  
				        daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
				        monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月',  
				                '7月', '8月', '9月', '10月', '11月', '12月' ],  
				        firstDay : 1  
				    }  
				}, function(start, end, label) {
					  //console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
				});
				
				//绑定日历事件，由日历"确认"按钮触发
				$('#date').on('apply.daterangepicker',function(ev, picker) {
					$("#createTime").val(picker.startDate.format('YYYY-MM-DD'));
					$("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
				});
				
				//以创建时间排列,order为0时执行升序排列，为1时执行降序排列
			 	$("#create-time").on("click",function(){
			 		var order=$(this).attr("data-order");
			 		if(order==="0"){
			 			//升序
			 			$(this).attr("data-order","1");
			 		}else{
			 			//降序
			 			$(this).attr("data-order","0");
			 		}
			 	});
			 	
			 	//分页操作，跳转到某页
			 	$("#go-page").on("click",function(){
			 		var page=$("#page").val().trim();
			 		if(page!="" && page!=null){
			 			//do something
			 		}
			 	});
 	
			});
		</script>
		
 	</body>
</html>